<template>
  <a-card :body-style="{padding: '24px 0px'}" :bordered="false">
    <a-form @submit="handleSubmit" :form="form">
      <a-form-item
        label="Title"
        :labelCol="{lg: {span: 3}, sm: {span: 3}}"
        :wrapperCol="{lg: {span: 14}, sm: {span: 21} }">
        <a-input
          :disabled="disabled"
          v-decorator="[
            'Title',
            {rules: [{ required: true, message: '请输入标题' },{max:20, message: '标题最多20个字符' }]}
          ]"
          name="Title"
          placeholder="请输入标题" />
      </a-form-item>
      <a-form-item
        label="Keywords"
        :labelCol="{lg: {span: 3}, sm: {span: 3}}"
        :wrapperCol="{lg: {span: 14}, sm: {span: 21} }">
        <a-textarea
          :disabled="disabled"
          rows="4"
          placeholder="请输入关键字,多个用英文逗号隔开"
          v-decorator="[
            'Keywords',
            {rules: [{ required: true, message: '关键字最多5个,多个用英文逗号隔开' }, {validator: validatorTag}]}
          ]" />
      </a-form-item>
      <a-form-item
        label="Description"
        :labelCol="{lg: {span: 3}, sm: {span: 3}}"
        :wrapperCol="{lg: {span: 14}, sm: {span: 21} }">
        <a-textarea
          :disabled="disabled"
          rows="4"
          placeholder="请输入描述内容"
          v-decorator="[
            'Description',
            {rules: [{ required: true, message: '请输入描述内容，最多100个字符' },{max:100, message: '描述内容最多100个字符' }]}
          ]" />
      </a-form-item>
      <a-form-item
        :wrapperCol="{ span: 24 }"
        style="text-align: center"
        class="form_btn">
        <a-button :disabled="disabled" :loading="confirmLoading" htmlType="submit" type="primary">提交</a-button>
        <a-button style="margin-left: 8px" @click="backClick">返回</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'SeoForm',
  data () {
    return {
      disabled: false,
      item: {},
      confirmLoading: false,
      // form
      form: this.$form.createForm(this)
    }
  },
  mounted () {
    if (this.$route.meta.seen) {
      this.disabled = true
    } else {
      this.disabled = false
    }
    if (this.$route.params.id) {
      this.Apidetail(this.$route.params.id)
    }
  },
  components: {
  },
  methods: {
    ...mapActions(['GetSeo', 'IntoSeoEdit']),
    backClick () {
      this.$router.go(-1)
    },

    Apidetail (id) {
      const {
        GetSeo
      } = this
      GetSeo(id)
        .then((res) => this.DetailSuccess(res))
        .catch(err => this.requestFailed(err))
    },
    DetailSuccess (res) {
      if (res.status === 200 || res.status === '200') {
        this.item = res.data
        this.form = this.$form.createForm(this, {
          mapPropsToFields: () => {
            return {
              Title: this.$form.createFormField({
                value: res.data.seoTitle || ''
              }),
              Keywords: this.$form.createFormField({
                value: res.data.seoKeyword ? JSON.parse(res.data.seoKeyword).join(',') : ''
              }),
              Description: this.$form.createFormField({
                value: res.data.seoDescription || ''
              })
            }
          }
        })
      } else {
        this.requestFailed(res)
      }
    },
    // 自定义验证
    validatorTag (rule, value, callback) {
      var arr = value.split(',')
      for (var i in arr) {
        if (arr[i].length >= 17) {
          // eslint-disable-next-line standard/no-callback-literal
          callback('每个标签最多16个字符')
        }
        if (arr.length >= 6) {
        // eslint-disable-next-line standard/no-callback-literal
          callback('标签最多5个')
        }
      }
      callback()
    },
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          values.id = this.$route.params.id
          this.IntoSeoEdit(values)
            .then((res) => this.submitSuccess(res))
            .catch(err => this.requestFailed(err))
        }
      })
    },
    submitSuccess (res) {
      if (res.status === 200 || res.status === '200') {
        this.$notification['success']({
          message: '成功',
          description: res.message,
          duration: 4
        })
        setTimeout(() => {
          this.confirmLoading = false
        }, 1500)
      } else {
        this.requestFailed(res)
      }
    },
    requestFailed (err) {
      this.$notification['error']({
        message: '错误',
        description: err.message || '请求出现错误，请稍后再试',
        duration: 4
      })
      setTimeout(() => {
        this.confirmLoading = false
      }, 1500)
    }
  }
}
</script>
